<template>
    <el-container>
        <!-- 头部 -->
        <el-header
            style="display: flex; justify-content: space-between; align-items: center; padding: 0 30px; background-color: #f5f5f5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div class="words" style="display: flex; align-items: center; justify-content: flex-start; flex: 1;">
                <i style="font-size: 28px; vertical-align: middle; margin-right: 12px;">🏥</i>
                <span @click="menuClick('doctorLayout')"
                style="font-size: 28px; font-weight: 700; color: #4A90E2; cursor: pointer; transition: color 0.3s ease, transform 0.3s ease;">
                 
                    医院管理系统 - 医生端
                    
                </span>
            </div>
            <div class="words" style="display: flex; align-items: center;">
                <span  style="margin-right: 10px; font-size: 20px; color: #666; padding-left: 30px;">
                    <b style="color: #333;">{{ userName }}</b>&nbsp;医生&nbsp;
                </span>
                <span 
                    ><el-button size="mini" @click="logout" style="border: none; background-color: transparent; padding: 0;"
                        ><svg t="1736321119854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4981" width="25" height="25"><path d="M903.112 840.504c0 51.48-41.72 93.192-93.184 93.192H196.528c-51.472 0-93.192-41.72-93.192-93.192V227.128c0-51.472 41.728-93.2 93.192-93.2h613.392c51.472 0 93.184 41.728 93.184 93.2v613.376z" fill="#232323" p-id="4982"></path><path d="M892.448 827.288c0 50.104-40.608 90.712-90.704 90.712H204.712c-50.096 0-90.712-40.608-90.712-90.712V230.264c0-50.104 40.616-90.72 90.712-90.72h597.032c50.096 0 90.704 40.616 90.704 90.72v597.024z" fill="#D82727" p-id="4983"></path><path d="M801.744 144.584H204.712c-50.096 0-90.712 40.616-90.712 90.712v30c0-50.096 40.616-90.712 90.712-90.712h597.032c50.096 0 90.704 40.616 90.704 90.712v-30c0-50.096-40.616-90.712-90.704-90.712z" fill="#FF7676" p-id="4984"></path><path d="M204.704 918h597.032c50.096 0 90.712-40.616 90.712-90.712v-30c0 50.096-40.616 90.712-90.712 90.712H204.704c-50.096 0-90.704-40.616-90.704-90.712v30c0 50.096 40.608 90.712 90.704 90.712z" fill="#AA1D1D" p-id="4985"></path><path d="M242.44 780.144L445.088 538.56l-187.504-223.2h117.512l85.136 108.976c16.008 20.72 28.896 38.072 38.648 52.08a1608.424 1608.424 0 0 1 42.304-51.2l93.496-109.848h112.296L555.288 534.176l206.304 245.96H646.168L532.312 635.712l-30.296-38.944-145.72 183.376H242.44z" fill="#FFFFFF" p-id="4986"></path></svg></el-button
                    ></span
                >
            </div>
        </el-header>

        <!-- 主体布局 -->
        <el-container style="min-height: 100vh; display: flex; flex-direction: row;">

            <!-- 侧边栏 -->
            <el-aside width="220px"
                style="background-color: #ffffff; border-right: 1px solid #ddd; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);">
                <!-- 导航菜单 -->
                <el-menu background-color="#fff" text-color="#333" active-text-color="#409eff"
                    :default-active="activePath" style="font-size: 18px; padding: 10px 0;">

                    <el-menu-item index="orderToday" @click="menuClick('orderToday')"
                        style="font-size: 18px; font-weight: 600; padding: 12px 20px; margin: 10px 0;  border-radius: 8px; transition: all 0.3s ease; background-color: #f1faff; text-align: center; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);"
                        @mouseover="hover = true" @mouseleave="hover = false">
                        今日挂号
                    </el-menu-item>

                    <el-menu-item index="doctorOrder" @click="menuClick('doctorOrder')"
                        style="font-size: 18px; font-weight: 600; padding: 12px 20px; margin: 10px 0;  border-radius: 8px; transition: all 0.3s ease; background-color: #f1faff; text-align: center; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);"
                        @mouseover="hover = true" @mouseleave="hover = false">
                        历史挂号
                    </el-menu-item>

                    <el-menu-item index="doctorCard" @click="menuClick('doctorCard')"
                        style="font-size: 18px; font-weight: 600; padding: 12px 20px; margin: 10px 0;  border-radius: 8px; transition: all 0.3s ease; background-color: #f1faff; text-align: center; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);"
                        @mouseover="hover = true" @mouseleave="hover = false">
                        个人信息
                    </el-menu-item>

                </el-menu>
            </el-aside>

            <!-- 主内容区 -->
            <el-main
                style="flex: 1; padding: 20px; background-color: #f9f9f9; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);">
                <!-- 子路由入口 -->
                <router-view></router-view>
            </el-main>

        </el-container>
    </el-container>


</template>
<script>
import jwtDecode from "jwt-decode";
import { toLoad } from "@/utils/initialize.js";
import {
    getToken,
    clearToken,
    getActivePath,
    setActivePath,
} from "@/utils/storage.js";
export default {
    name: "Doctor",
    data() {
        return {
            userName: "",
            activePath: "",
        };
    },
    methods: {
        //token解码
        tokenDecode(token) {
            if (token !== null) return jwtDecode(token);
        },
        //导航栏点击事件
        menuClick(path) {
            this.activePath = path;
            setActivePath(path);
            if (this.$route.path !== "/" + path) this.$router.push(path);
            console.log(path);
        },
        //退出登录
        logout() {
            this.$confirm("此操作将退出登录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    clearToken();
                    this.$message({
                        type: "success",
                        message: "退出登录成功!",
                    });
                    this.$router.push("login");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
    },
    created() {
        //  获取激活路径
        this.activePath = getActivePath();
        // 解码token
        this.userName = this.tokenDecode(getToken()).dName;
    },
    mounted() {
        toLoad();
    },
};
</script>
<style scoped lang="scss">
.title {
    cursor: pointer;
}

.el-header {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgrey;

    .words {
        text-align: center;

        span {
            color: black;
        }
    }
}

.el-container {
    height: 100%;
}

.el-aside {
    background-color: white;
    border-right: 1px solid lightgrey;
}

.el-menu {
    border: 0;
}
</style>
